﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="/Content/ardome-styles.css" type="text/css" rel="Stylesheet" />
    <script src="/Content/jwplayer/jwplayer.js" type="text/javascript" language="javascript"></script>
</head>
<body class="main">

    <style type="text/css">
        body.main{margin-top:0px;}
        .feed-container
        {
            float:left; margin:20px 20px 0px 0px;
            width:600px; min-height:360px;            
            border-top:#CCCCCC 1px solid;
            border-left:#CCCCCC 1px solid;
            background-color:#FFFFFF; color:#6f6f6f;
            border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
            box-shadow: 2px 2px 4px -2px #333333; -moz-box-shadow: 2px 2px 4px -2px #333333; -webkit-box-shadow: 2px 2px 4px -2px #333333;
        } 
        .feed-container:hover { border-top:#666666 1px solid; border-left:#666666 1px solid;}
        .player{ width:360px; height:270px; float:left;}        
        .feed-title{ font-size:32px; color:#666699; font-weight:bold; margin-left:195px;}
        .top-margin{margin-top:15px;}
        .feed-info{float:left; width:165px;}
        .feed-info-text{margin-left:10px;}
        .feed-info-label{font-size:26px; font-weight:normal;}
        .feed-info-value{font-size:24px; font-weight:normal; line-height:20px;}
        .feed-watched-bar{float:left; width:10px; height:250px; margin:10px 10px 0px 10px; border-right:#CCCCCC 1px solid; background-color:#CCCCCC;}
        .feed-unwatched-bar{float:left; width:10px; height:250px; margin:10px 10px 0px 10px; border-right:#FF0000 1px solid; background-color:#FF0000;}
        .feed-item-title{font-size:28px; font-weight:normal; margin:0px 10px 10px 195px;}
        .feed-item-title a:link{color:#6f6f6f; text-decoration:none;}
        .feed-item-title a:visited{color:#6f6f6f; text-decoration:none;}
        .feed-item-title a:hover{color:#6f6f6f; text-decoration:underline;}
    </style>
    <script language="javascript" type="text/javascript">
        var MAX_FEED_PER_CHANNEL = 5;
        var _FeedChannels = 'EBU,CNN,AP,Reuters'.split(',');
        var _FeedItems = new Array();
        var _FeedContainers = null;
        var _CurrentlyPlaying = new Array();
        
        /***** Necessary Custom Classes ********/
        function Item(feedChannel, ardomeId, title, created, duration, browseUrl, hasPlayed) {
            this.FeedChannel = feedChannel;
            this.ArdomeID = ardomeId;
            this.Title = title;
            this.Created = created;
            this.Duration = duration;
            this.BrowseUrl = browseUrl;
            this.HasPlayed = hasPlayed;
        }
        function ItemPlaying(feedChannel, ardomeId) {
            this.FeedChannel = feedChannel;
            this.ArdomeID = ardomeId;
        }
        /******* End of Classes  *******/

        function GetElementsByClass(parentElement, className) {
            var elements = new Array();
            var childElements = parentElement.getElementsByTagName('*');
            for (var i = 0; i < childElements.length; i++) {
                var element = childElements[i];
                if (element.className == className)
                    elements.push(element);
            }
            return elements;
        }
        function GetElementByAttribute(parentElement, attr, value) {            
            parentElement = parentElement || document.body;
            var childElements = parentElement.getElementsByTagName('*');
            for (var i = 0; i < childElements.length; i++) {
                var element = childElements[i];
                if(GetAttributeValue(element, attr) == value) //if(element.hasAttribute(attr) && element.getAttribute(attr) == value)
                    return element;
            }
            return null;
        }
        function GetAttributeValue(element, attr) {
            var result = (element.getAttribute && element.getAttribute(attr)) || null;
            if (!result) {
                var attrs = element.attributes;
                var length = attrs.length;
                for (var i = 0; i < length; i++)
                    if (attrs[i].nodeName === attr)
                        result = attrs[i].nodeValue;
            }
            return result;
        }

        function GetIndexOfFeedChannel(channelName) {
            for (var i = 0; i < _FeedChannels.length; i++) {
                if (_FeedChannels[i] == channelName)
                    return i;
            }
            return -1;
        }
        function GetCurrentlyPlayingItemIndex(channelName) {
            for (var i = 0; i < _CurrentlyPlaying.length; i++) {
                if (_CurrentlyPlaying[i].FeedChannel == channelName)
                    return i;
            }
            return -1;
        }
        function GetInitialFeeds() {
            _FeedItems.push(new Item('EBU', '0101010101010121', 'Playing Item 1 for EBU', '14:28:30', '00:00:05:01', '/Content/Videos/video.mp4', false)); //Avenges.mp4
            _FeedItems.push(new Item('EBU', '0101010101009121', 'Playing Item 2 for EBU', '15:40:30', '00:00:18:00', '/Content/Videos/video.mp4', false));
            _FeedItems.push(new Item('EBU', '0101010101008121', 'Playing Item 3 for EBU', '09:54:01', '00:00:23:08', '/Content/Videos/video.mp4', false));
            _FeedItems.push(new Item('Reuters', '0101010101007121', 'Playing Item 1 for Reuters', '12:24:30', '00:00:46:17', '/Content/Videos/video.mp4', false));
            _FeedItems.push(new Item('CNN', '0101010101010621', 'Playing Item 1 for CNN', '11:34:33', '00:00:22:44', '/Content/Videos/video.mp4', false));
        }
        function GetFeedItemsForChannel(channelName) {
            var feedItems = new Array();
            for (var i = 0; i < _FeedItems.length; i++) {
                var feedItem = _FeedItems[i];
                if (feedItem.FeedChannel == channelName)
                    feedItems.push(feedItem);
            }
            return feedItems;
        }
        function BindPlayer(container, feedChannel, item) {
            jwplayer(container).setup({
                flashplayer: '/Content/jwplayer/player.swf',
                file: item == null ? '' : item.BrowseUrl, ///An URL of Blank Video Should be Given In Case of no Video for this Channel   ///Content/Videos/video.mp4
                height: 270,
                width: 360,
                events: {
                    onComplete: function () {
                        PlayNextVideo(container, feedChannel);
                    },
                    onMute: function () {
                        //alert(value);
                        MuteOtherPlayers(feedChannel);
                    }
                }
            });
            jwplayer(container).setMute(true);
            jwplayer(container).play();                        
        }
        function BindAllPlayers() {
            for (var i = 0; i < _FeedContainers.length; i++) {
                var container = document.getElementById('divPlayer_' + (i + 1));
                var feedChannel = _FeedChannels[i];
                var item = GetNextFeedItem(feedChannel, null);
                BindPlayer(container, feedChannel, item);
                SetItemInfo(_FeedContainers[i], item);
                if(item != null)
                    item.HasPlayed = true;
                var itemPlaying = new ItemPlaying(feedChannel, item == null ? null : item.ArdomeID);                
                _CurrentlyPlaying.push(itemPlaying);
            }
        }
        function MuteOtherPlayers(feedChannel) {
            var playerIndex = GetIndexOfFeedChannel(feedChannel);
            for (var i = 0; i < _FeedContainers.length; i++) {
                if (i != playerIndex) {
                    jwplayer(i).setMute(true);
                }
            }            
        }
        function GetNextFeedItem(feedChannel, currentArdomeID) {
            var feedItems = GetFeedItemsForChannel(feedChannel);
            if (feedItems != null && feedItems.length > 0) {
                for (var i = 0; i < feedItems.length; i++) {
                    var item = feedItems[i];
                    if (!item.HasPlayed) {
                        //item.HasPlayed = true;
                        return item;
                    }
                }
                if (currentArdomeID == null)
                    return feedItems[0];

                for (var i = 0; i < feedItems.length; i++) {
                    var item = feedItems[i];
                    if (item.ArdomeID == currentArdomeID) {
                        if (i == (feedItems.length - 1))
                            return feedItems[0];
                        else
                            return feedItems[i + 1];
                    }
                }
            }
            return null;
        }
        function PlayNextVideo(container, feedChannel) {            
            var indexOfPlayer = GetIndexOfFeedChannel(feedChannel);            
            if (indexOfPlayer > -1) {
                var nextFeedItem = GetNextFeedItem(feedChannel, _CurrentlyPlaying[indexOfPlayer].ArdomeID);
                if (nextFeedItem != null) {
                    jwplayer(indexOfPlayer).load({ file: nextFeedItem.BrowseUrl })
                    jwplayer(indexOfPlayer).play();
                    SetItemInfo(_FeedContainers[indexOfPlayer], nextFeedItem);
                    nextFeedItem.HasPlayed = true;
                    _CurrentlyPlaying[indexOfPlayer].ArdomeID = nextFeedItem.ArdomeID;
                }
            }
        }
        function SetItemInfo(container, item) {
            if (item != null) {
                var childElements = GetElementsByClass(container, 'feed-info-value');
                var divCreated = GetElementByAttribute(container, 'labelid', 'lblCreated');
                var divDuration = GetElementByAttribute(container, 'labelid', 'lblDuration');
                if(divCreated != null)
                    divCreated.innerHTML = item.Created;
                if(divDuration)
                    divDuration.innerHTML = item.Duration;

                var divTitle = GetElementsByClass(container, 'feed-item-title')[0];
                divTitle.innerHTML = '<a href="javascript:void(0);" onclick="ShowItemPopUp(' + item.ArdomeID + ');">' + item.Title + '</a>';
                var leftBar = GetElementByAttribute(container, 'labelid', 'lblLeftBar');
                var rightBar = GetElementByAttribute(container, 'labelid', 'lblRightBar');
                if (!item.HasPlayed) {
                    rightBar.className = 'feed-unwatched-bar';
                    leftBar.className = 'feed-unwatched-bar';
                }
                else {
                    rightBar.className = 'feed-watched-bar';
                    leftBar.className = 'feed-watched-bar';
                }
            }
        }
        function SetIDOfPlayers() {
            for (var i = 0; i < _FeedContainers.length; i++) {
                var container = _FeedContainers[i];
                var element = GetElementsByClass(container, 'player')[0].getElementsByTagName('div')[0];
                element.id = 'divPlayer_' + (i + 1);
            }
        }
        function ShowItemPopUp(ardomeID) {
            var url = 'detailview=/op=info/id=' + ardomeID;
            ShowCenteredPopUp(url, 'ItemInfo', 800, 600, true);
        }
        function ShowCenteredPopUp(pageURL, windowName, width, height, isScrolling) {
            var scrollbars = isScrolling ? 'yes' : 'no';            
            var leftPosition = (screen.width) ? (screen.width - width) / 2 : 0;
            var topPosition = (screen.height) ? (screen.height - height) / 2 : 0;
            topPosition -= 30;
            var settings = 'height=' + height + ',width=' + width + ',top=' + topPosition + ',left=' + leftPosition + ',resizable=no,scrollbars=' + scrollbars + ',menubar=no,toolbar=no,status=yes,location=no,directories=no,addressbar=no'
            var page = pageURL;
            win = window.open(page, windowName, settings);
            if (win != null) {
                win.window.focus();
            }
            return win;
        }
        function GetByID(ardomeID) {
            for (var i = 0; i < _FeedItems.length; i++) {
                var feedItem = _FeedItems[i];
                if (feedItem.ArdomeID == ardomeID)
                    return feedItem;
            }
            return null;
        }
    </script>
    
    <div>
        <!--<h1>Feed Watcher</h1>-->
        <div class="feed-container">
            <div class="feed-title">EBU</div>
            <div>
                <div class="feed-info">
                    <div class="feed-info-text">
                        <div class="feed-info-label">Created</div>
                        <div class="feed-info-value" labelid="lblCreated">14:28:30</div>
                        
                        <div class="feed-info-label top-margin">Duration</div>
                        <div class="feed-info-value" labelid="lblDuration">00:00:30:00</div>
                    </div>                    
                </div>
                <div class="feed-watched-bar" labelid="lblLeftBar"></div>
                <div class="player">
                    <div id=""></div>                
                </div>
                <div class="feed-watched-bar" labelid="lblRightBar"></div>
                <div class="clear"></div>
            </div>
            <div class="feed-item-title">Images from France</div>
        </div>

        <!--Container 2-->
        <div class="feed-container">
            <div class="feed-title">CNN</div>
            <div>
                <div class="feed-info">
                    <div class="feed-info-text">
                        <div class="feed-info-label">Created</div>
                        <div class="feed-info-value" labelid="lblCreated">14:28:30</div>
                        
                        <div class="feed-info-label top-margin">Duration</div>
                        <div class="feed-info-value" labelid="lblDuration">00:00:30:00</div>
                    </div>                    
                </div>
                <div class="feed-watched-bar" labelid="lblLeftBar"></div>
                <div class="player">
                    <div id=""></div>                
                </div>
                <div class="feed-watched-bar" labelid="lblRightBar"></div>
                <div class="clear"></div>
            </div>
            <div class="feed-item-title">CNN Updates</div>
        </div>

        <!--Container 3-->
        <div class="feed-container">
            <div class="feed-title">AP</div>
            <div>
                <div class="feed-info">
                    <div class="feed-info-text">
                        <div class="feed-info-label">Created</div>
                        <div class="feed-info-value" labelid="lblCreated">14:28:30</div>
                        
                        <div class="feed-info-label top-margin">Duration</div>
                        <div class="feed-info-value" labelid="lblDuration">00:00:30:00</div>
                    </div>                    
                </div>
                <div class="feed-watched-bar" labelid="lblLeftBar"></div>
                <div class="player">
                    <div id=""></div>                
                </div>
                <div class="feed-watched-bar" labelid="lblRightBar"></div>
                <div class="clear"></div>
            </div>
            <div class="feed-item-title">News 00915</div>
        </div>

        <!--Container 4-->
        <div class="feed-container">
            <div class="feed-title">Reuters</div>
            <div>
                <div class="feed-info">
                    <div class="feed-info-text">
                        <div class="feed-info-label">Created</div>
                        <div class="feed-info-value" labelid="lblCreated">14:28:30</div>
                        
                        <div class="feed-info-label top-margin">Duration</div>
                        <div class="feed-info-value" labelid="lblDuration">00:00:30:00</div>
                    </div>                    
                </div>
                <div class="feed-watched-bar" labelid="lblLeftBar"></div>
                <div class="player">
                    <div id=""></div>                
                </div>
                <div class="feed-watched-bar" labelid="lblRightBar"></div>
                <div class="clear"></div>
            </div>
            <div class="feed-item-title">Wall Street Today</div>
        </div>        

        <div class="clear"></div>
    </div>

    <script language="javascript" type="text/javascript">
        window.onload = function () {
            _FeedContainers = GetElementsByClass(document.getElementsByTagName('body')[0], 'feed-container');
            SetIDOfPlayers();
            GetInitialFeeds();
            BindAllPlayers();
            //var element = document.getElementById('asdsdf');
            //alert(_FeedContainers.length);
        }
    </script>
</body>
</html>
